<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <!-- <el-form-item>
        <el-input v-model="formItem.s_code" clearable placeholder="请输入编码..." />
      </el-form-item> -->
      <el-form-item>
        <el-date-picker
          v-model="timeRangeCreateTimeStart"
          clearable
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="timestamp"
          @change="search"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formItem.s_globalSearch"
          placeholder="请输入查询内容..."
          size="mini"
          clearable
          @keyup.enter.native="search"
          @change="onGlobeSearchInputChange"
        />
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="formItem.s_changeStatus" class="select_input" clearable placeholder="请选择维保变更状态">
          <el-option v-for="(item) in status" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
        <!-- <el-button plain icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 定义一个查询表单原始项
const formItem = {
  s_code: '',
  s_changeStatus: '',
  /** 维保开始时间的起止范围 */
  s_createTimeBegin: '',
  s_createTimeEnd: '',
  s_globalSearch: ''
}

export default {
  name: 'PermissionsTableFilter',
  data() {
    return {
      status: [{ value: 'created', label: '已创建' }, { value: 'finish', label: '已完成' }],
      /** 时间选择器 */
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      /** 存储时间范围 */
      timeRangeCreateTimeStart: [],
      formItem: { ...formItem }
    }
  },
  created() {
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      if (this.timeRangeCreateTimeStart && this.timeRangeCreateTimeStart.length !== 0) {
        this.formItem.s_createTimeBegin = this.timeRangeCreateTimeStart[0]
        this.formItem.s_createTimeEnd = this.timeRangeCreateTimeStart[1]
      } else {
        this.formItem.s_createTimeBegin = ''
        this.formItem.s_createTimeEnd = ''
      }
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = { ...formItem }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.search()
      }
    }
  }
}
</script>
